<template>
	<view class="container">
		<!-- <header class="aui-navBar aui-navBar-fixed">
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-return"></i>
			</a>
			<view class="aui-center">
				<span class="aui-center-title">我的订单</span>
			</view>
			<a href="javascript:;" class="aui-navBar-item">
				<i class="icon icon-sys"></i>
			</a>
		</header> -->
		<!-- <u-navbar>
			<view class="" slot="center">
				我的订单
			</view>
		</u-navbar> -->
		<view class="aui-scrollView">
			<view class="aui-tab">
				<ul class="tab-nav">
					<block v-for="(menuTab,index) in menuTabs" :key="index">
						<li v-bind:id="'tabNum'+index" @click="swichMenu(index)" :class="[currentTab==index ? 'tab-nav-item tab-active' : 'tab-nav-item']">
							{{menuTab.name}}
						</li>
					</block>
				</ul>
				<view class="divHeight"></view>
				<view class="tab-panel">
					<block v-for="(menu,index) in menuLists" :key="index">
						<!-- <view :class="[currentTab==index2 ? 'tab-panel-item tab-active' : 'tab-panel-item']"> -->
								<view class="tab-item">
									<a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
										<view class="aui-well-item-hd">
											<img :src="menu.storeMainImage" alt="">
										</view>
										<view class="aui-well-item-bd">
											<h3>{{menu.storeName}}</h3>
										</view>
										<span class="aui-well-item-fr">{{menu.status === 4 ? '已取消':'取消'}}</span>
									</a>
									<view class="aui-mail-product">
										<a href="javascript:;" class="aui-mail-product-item">
											<view class="aui-mail-product-item-hd">
												<img :src="menu.mainImage" alt="">
											</view>
											<view class="aui-mail-product-item-bd aui-mail-product-item-detail">
												<view class="">
													<p>{{menu.name}}</p>
												</view>
												<view class="aui-mail-product-np">
													<view class="">
														价格：{{menu.price}}
													</view>
													<view class="">
														数量：{{menu.num}}
													</view>
												</view>
												<view class="">
													下单时间：{{menu.orderTime}}
												</view>
											</view>
											
										</a>
									</view>
									<a href="javascript:;" class="aui-mail-payment">
										<p>
											共{{menu.num}}件商品 实付款: ￥{{menu.price}}
										</p>
									</a>
									<view class="aui-mail-button">
										<u-button v-if=" menu.status == 1" type="primary" :class="'hd'" size="normal" shape="circle" hairline>查看物流</u-button>
										<u-button v-if=" menu.status == 2" type="warning" :class="'hd'" shape="circle" @click="doReceive(menu)" hairline>确认收货</u-button>
										<u-button v-if=" menu.status == 3" type="success" :class="'hd'" shape="circle" hairline>评价晒单</u-button>
										<u-button type="error" :class="'hd'" shape="circle">查看发票</u-button>
									</view>
								</view>
								<view :class="'divHeight'"></view>
						<!-- </view> -->
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiGetOrderList,apiEditOrderGot} from '@/api/order.js'
	import {transTimeType} from '@/utils/common.js'
	export default {
		data() {
			return {
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [
					{
						name: '全部'
					}, {
						name: '已下单'
					}, {
						name: '已送达'
					}, {
						name: '已完成'
					}, {
						name: '已取消'
					},
				],
				menuLists: [],
				orderParams:{
					pageNum:1,
					pageSize:10,
					status:null, // 表示的是订单状态
				}
			}
		},
		onLoad(options) {
			// for (var i = 0; i < this.menuLists.length; i++) {
			// 	this.getDateList(i);
			// }
			this.getOrderList()
		},
		methods: {
			getOrderList(){
				let params = JSON.parse(JSON.stringify(this.orderParams))
				apiGetOrderList(params).then(res=>{
					console.log(res)
					this.menuLists = res.rows.map(item=>{
						let thisTime = item.createTime
						item.orderTime = transTimeType(thisTime)
						return item
					})
				})
			},
			swichMenu: async function(current) { //点击其中一个选项
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					if(this.currentTab === 0){
						this.orderParams.status = null
					}else{
						this.orderParams.status = this.currentTab
					}
					this.setScrollLeft(current);
					this.getOrderList()
				}
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			getDateList: function(tabIndex) {
				// var entity = this.menuTabs[tabIndex].name;
				// this.menuLists[tabIndex].push(entity);
			},
			doReceive(item){
				apiEditOrderGot({id:item.orderId,status:item.status}).then(res=>{
					this.getOrderList()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	@import './style.css';
	.container{
		background-color: #fff;
	}
</style>
